<template>
	<view class="content">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<!-- <view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
				<view class="coupon-item" v-for="(item, index) in list" :key="index">
					<view class="coupon-num">
						<text class="gradient coupon-num-dw">￥</text>
						<view class="gradient coupon-num-text" >{{item.coupon.coupon_price}}</view>
					</view>
					
					<view style="display: flex;flex-direction: column;color: #fff;justify-content: center;margin-left: 40rpx;flex: 1;">
						<text style="font-size: 36rpx;">{{item.coupon.title}}</text>
						<text style="font-size: 16rpx;">({{item.coupon.desc}})</text>
						<text style="font-size: 16rpx;">使用时间: {{item.coupon.start_use_day}}-{{item.coupon.end_use_day}}</text>
					</view>
					
					<view class="lingqu" >
						<text>立即</text>
						<text>使用</text>
					</view>
				</view>
			</view> -->
			<view v-for="(item, index) in list" :key="index" @click="selectAddressFn(item)">
				<coupon :data="item.coupon" :endUseDate="item.end_use_date"></coupon>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import coupon from "../../components/coupon.vue";
	import {userCoupon} from "@/common/http.api.js"
	export default {
		components:{
			coupon
		},
		mixins: [MescrollMixin],
		data() {
			return {
				pagination: {
					auto: false,
					page: 1,
					pageSize: 20,
					total: 0,
				},
				loadStatus: 'loadmore',
				upOption: {
					auto: false,
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				list: [],
				type: ''
			}
		},
		onLoad({type}) {
			this.type = type
		},
		methods: {
			getData(page){
				let that = this;
				userCoupon({
					page,
					pageSize: this.pagination.pageSize,
				}).then(res => {
					that.mescroll.endByPage(res.data.length, res.pagination.total)
					that.pagination = res.pagination;
					if (page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					that.pagination.page++
				})
			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			selectAddressFn(item){
				if(this.type == 'select'){
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$api.prePage().selectAddressFn(item);
					uni.navigateBack()
				}
			},
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: #f3f3f3;
		min-height: 100vh;
	}
	.gradient{
		background-image:-webkit-linear-gradient(bottom,#FEE474,#FDFECA,#FEE474);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-animation: hue 60s infinite linear;
	}
	// .coupon-item{
	// 	background-image: url('https://img.koalalf.com/coupon/bg-1.png'); 
	// 	width: 700rpx; 
	// 	height: 210rpx; 
	// 	background-size: 100%;
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	margin: 20rpx 0;
	// }
	// .coupon-num{
	// 	display: flex;
	// 	align-items: baseline;
	// 	padding-left: 40rpx;
	// 	.coupon-num-dw{
	// 		font-size: 32rpx;
	// 		font-weight: bold;
	// 	}
	// 	.coupon-num-text{
	// 		font-size: 122rpx;
	// 		font-weight: bold;
	// 	}
	// }
	// .lingqu{
	// 	width: 96rpx; 
	// 	height: 96rpx;
	// 	border-radius: 50%;
	// 	color: #fff;
	// 	background-color: #F63E3D;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-size: 28rpx;
	// 	margin-right: 24rpx;
	// 	flex-direction: column;
	// 	margin-top: 16rpx;
	// }
</style>
